<div class="page">
    @if($page['total']>0)
        <div class="pagination">
            @if(isset($page['links']['first_page']))
                <a href="{{$page['links']['first_page']}}">首页</a>
            @endif

            @if(isset($page['links']['prev_page']))
                <a href="{{$page['links']['prev_page']}}">上一页</a>
            @endif

            @foreach($page['links']['list_page'] as $item)
                <a class="{{$item['current_page'] ? 'active' : ''}}" href="{{$item['path']}}">{{$item['num']}}</a>
            @endforeach

            @if(isset($page['links']['next_page']))
                <a href="{{$page['links']['next_page']}}">下一页</a>
            @endif

            @if(isset($page['links']['last_page']))
                <a href="{{$page['links']['last_page']}}">末页</a>
            @endif
                <span class="follow_page">共{{$page['total_pages']}}页，到第<input type="number" class="page_num" value="{{$page['current_page']}}" min="1"
                                                                         max="{{$page['total_pages']}}">页</span>
            <a data-url="{{$page['links']['url_template']}}" class="confirm-btn">确认</a>
        </div>
    @endif
</div>

<script>
    $(function () {
        $('.page_num').blur(function () {
            var pagevalue = ($(this).val())*1;
            var totalPage = ('{{$page['total_pages']}}')*1;
            if(pagevalue > totalPage){
                pagevalue = totalPage;
            }
            var pageurl = $('.confrim-btn').data('url');

            $('.confrim-btn').attr('href', pageurl.replace('page_num', pagevalue));
            //window.location.href=AJAX_URL+'/user/login';
            //alert(pageurl+pagevalue);
        });
        $(".page_num").change(function(){
            var pagevalue = $(this).val();
            var max = $(this).attr('max');
            if(pagevalue<=0){
                $(".page_num").val(1);
            }
            if( parseInt(max)<=parseInt(pagevalue)){
                $(".page_num").val(max);
            }
        });
    })
</script>

<style type="text/css">
    @charset "utf-8";
    /* CSS Document */
    .page {
        font-size: 12px;
        font-weight: bold;
        height: 60px;
        line-height: 60px;
        text-align: center;
        clear: both;
    }

    .page a {
        text-decoration: none;
        color: #666;
        background: #fff;
        border: 1px solid #CCCCCC;
        /* padding: 9px 13px; */
        margin-right: 3px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        width: 48px;
    }

    .page a.active {
        background: #1d76d9;
        border: 1px solid #1d76d9;
        color: #fff
    }

    .page a:hover {
        text-decoration: none;
        color: #fff;
        background: #1d76d9;
        border: 1px solid #1d76d9
    }

    .page span {
        margin-left: 16px;
        font-size: 16px;
        color: #999;
    }

    .page span em {
        margin: 0 2px;
    }

    .page .follow_page {
        font-size: 13px;
        margin-left: 6px;
    }

    .page .follow_page input {
        width: 38px;
        height: 24px;
        line-height: 24px;
        margin: 0 4px;
        border: 1px solid #ccc;
        text-align: center;
    }

    .page .confirm-btn {
        margin-left: 8px;
        cursor:pointer;
    }

    input.error {
        border: 1px solid #D70128 !important;
    }

    .error {
        border: 1px solid #D70128 !important;
    }

    .hlkg .input.error {
        border: 1px solid #D70128 !important;
    }

    .hlkg textarea.error {
        border: 1px solid #D70128 !important;
    }
</style>

